<!DOCTYPE html>
<html lang="en">

<head>
    <title>2008-在线交友聊天室</title>
    <%- include common %>
        <style>
            #chatroom {
                height: 520px;
                border: 1px solid darkgoldenrod;
                border-radius: 5px;
                overflow-y: auto;
                margin-left: 15px;
            }

            * {
                padding: 0;
                margin: 0;
            }


            html,
            body {
                position: relative;
                width: 100vw;
                height: 100vh;
            }

            #mask {
                width: 100vw;
                height: 100vh;
                position: absolute;
                top: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.3);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #box {
                width: 200px;
                height: 200px;
                background: darkkhaki;
                border: 1px solid darkred;
                border-radius: 6px;
                display: none;

            }
        </style>
</head>

<body>
    <%- include('head',{title:'client',username:username })%>
        <div class="container">
            <h2> wh2008-在线聊天室 - <span style="color:yellowgreen" id="user">
                    <%- username %>
                </span></h2>
            <div class="client-box">
                <div class="row">
                    <div id="chatroom" class="col-md-6"></div>
                </div>
                <textarea class="col-md-6" name="content" id="word" placeholder="Content"></textarea>
                <button id="sendbtn">发送</button>
            </div>

            <div id="mask">
                <div class="tips">
                    链接聊天室服务器中...
                </div>
                <!-- <div id="box">
                    <input type="text" id="nickname" placeholder="请输入昵称" required>
                    <button  id="btn">确定链接</button>        
                </div> -->
            </div>
        </div>
        <script>
            // # 创建 socket 对象
            // # 链接服务器端指定的端口
            // # 发送消息给服务器端
            // # 接收来自服务器的消息
            // # 监听服务器的 失去链接关闭
            var ws = new WebSocket("ws://192.168.58.167:3800");  // 创建链接对象 

            // 打开  第一次链接服务器 
            ws.onopen = function () {
                console.log("链接成功---success")
                $(".tips").hide();
                $("#box").show();
                $("#mask").hide();
            }

            function sendWord() {
                ws.send(word.value)
                word.value = "";
            }
            sendbtn.onclick = function () {
                sendWord()
            }

            document.onkeypress = function (e) {
                if (e.keyCode == 13) {
                    sendWord()
                }
            }


            // // 点击链接 发送消息 
            // btn.onclick = function(){
            //     var myname = nickname.value;
            //     console.log(myname);
            //     ws.send("大家好,我是 " + myname)    // 发送消息给服务器端
            //     $("#mask").hide();
            //     $("#user").text(myname)
            // }

            // 监听服务器异常 
            ws.onerror = function (err) {
                console.log("服务器停止服务了 - 服务异常 ...")
            }
            // 监听服务器端关闭
            ws.onclose = function () {
                console.log("服务器已经关闭了...")
            }

            // # 接收来自服务器的消息
            ws.onmessage = function (data) {
                console.log(data)
                $("#chatroom").append(`<p style="color:#666;font-size:14px">${data.data}</p>`);
            }
        </script>
</body>

</html>